﻿<!DOCTYPE html>
<html>
<head>
    <title>showhide-rules Documentation</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="jquery.showhide-rules.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //For each child, define the parent rules	
			$('.child-class1').showhide({'parentStatement': 'parent1'}); //checkbox parent
			
            //For each child, define the parent rules
            var rules = [
                    ['child1', 'parent1'], //checkbox parent
                    ['child2', 'parent1_AND_parent2'], //AND rule
                    ['child3', 'parent1 parent2'], //OR rule
                    ['child4', 'parent1_AND_parent3 parent2'], //AND and OR rules
                    ['child5', 'NOT_parent1'], //negative relationship
                    ['child6', 'parent4'], //radio parent
                    ['child7', 'parent5'], //radio parent
                    ['child8', 'parent6_VAL_foo'], //select parent
                    ['child9', 'parent6_VAL_bar'], //select parent
                    ['child10', 'parent6_VAL_hello parent6_VAL_world'], //select w/ OR
                    ['child11', 'NOT_parent6_VAL_world'], //select w/ negative
            ];
            var formulas = [
                    ['input1', 'input2+input3']
            ];
            //Apply the rules
            $('#inline').showhide({
                'inline' : true
            });
            $('#rules').showhide({
                'showhide': rules
            });
            $('#formulas').showhide({
                'formula': formulas
            });
        });
    </script>
    <style>
        div { background-color:#eee; border:1px solid #aaa; margin:1px; width:40em; }
        code { background-color:#E0F8E0; }
        textarea { width:60em;background-color:#E0F8E0;border:1px solid #aaa; }
    </style>
</head>
<body>
    <form id="intro">
        <h2>Usage Version 1.2</h2>
        <p>Binding change events to show and hide elements in a form with jQuery is relatively easy until you have many complex forms with lots of rules.  This jQuery plugin attempts to untangle that mess.  By providing defining parent/child relationships inline or in an array of rules, this plugin creates bindings on the change event of the parent element that will show and hide the child.</p>
        <textarea style="height:23em;">
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" src="jquery.showhide-rules.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('body').showhide({
                    'inline' : true
                });
            });
        </script>
    </head>
    <body>
        <input id="myParent" type="checkbox" /><label for="myParent">My Parent</label>
        <div id="myChild" class="sh-child" data-showhide='{ "dependencies": "myParent" }'>
            My Child is shown when My Parent is checked.
        </div>
    </body>
</html></textarea>
    </form>
    <hr />
    <form id="inline">
        <h2>Option 1: Inline Declaration</h2>
        <input id="parent0" type="checkbox" /><label for="parent0">Parent 0</label>
        <div id="child0" class="sh-child" data-showhide='{ "dependencies": "parent0" }'>Child 0 is shown when Parent 0 is checked using an <strong>inline declaration</strong>.</div>
        <p>On any child element, give the element an id and set <code>class="sh-child"</code> and <code>data-showhide='{ "dependencies": "putYourParentRulesHere" }'</code> where <code>putYourParentRulesHere</code> is the parent id statements.<br />
            <textarea style="height:5em;">
<script>
    $('body').showhide({ 'inline' : true });
</script>
<div id="child0" class="sh-child" data-showhide='{ "dependencies": "parent0" }'>...</div></textarea>
        </p>
    </form>
    <hr />
    <form id="rules">
        <h2>Option 2: Single jQuery Declaration</h2>
        <p>Use the standard jQuery statement on a child(ren) and define the parent relationship. Identifying the child(ren) can be done with class or id. For each child id or class, assign the parent id statement.<br />
            <textarea style="height:7em;">
<script>
    $('#child0').showhide({'parentStatement': 'parent0'});
</script>
<div id="child0">...</div>
            </textarea>
            <textarea style="height:8em;">
<script>
    $('.child0').showhide({'parentStatement': 'parent0'});
</script>
<div class="child0">...</div>
<div class="child0">...</div>
            </textarea>
        </p>
		<h2>Option 3: JavaScript Array Declaration</h2>
        <p>Alternatively, create a JavaScript array of child-parent relationships. For each child id, assign the parent id statement.  Other than the ids, no additional markup is needed.<br />
            <textarea style="height:8em;">
<script>
    var rules = [ ['child0', 'parent0'] ];
    $('body').showhide({ 'showhide': rules });
</script>
<div id="child0">...</div>
            </textarea>
        </p>
        <p>Note: All declaration types are allowed to be used at the same time, meaning some declarations can be in an array and some inline within the same scope.</p>
        <hr />
        <h2>Parent ID Statements - Dependencies</h2>
        <ul>
            <li><code>parentId1</code> (child is dependent on one parent)</li>
            <li><code>parentId1_AND_parentId2</code> (AND - child is dependent on both parents)</li>
            <li><code>parentId1 parentId2</code> (OR - child is dependent on either parent)</li>
            <li><code>parentId1_AND_parentId2 parentId3</code> (AND and OR - multiple conditions)</li>
            <li><code>NOT_parentId1</code> (NOT - negative relationship)</li>
            <li><code>parentId1_VAL_foo</code> (VAL - for dropdown value, i.e. if the value of parentId1=foo)</li>
        </ul>
        <hr />
        <h2>Checkboxes Example</h2>
        <input id="parent1" type="checkbox" /><label for="parent1">Parent 1</label>
        <input id="parent2" type="checkbox" /><label for="parent2">Parent 2</label>
        <input id="parent3" type="checkbox" /><label for="parent3">Parent 3</label>
        <div id="child1">Child 1 is shown when Parent 1 is checked.</div>
        <div id="child2">Child 2 is shown when both Parent 1 <strong>and</strong> Parent 2 are checked.</div>
        <div id="child3">Child 3 is shown when either Parent 1 <strong>or</strong> Parent 2 is checked.</div>
        <div id="child4">Child 4 is shown when both Parent 1 <strong>and</strong> Parent 3 are checked <strong>or</strong> Parent 2 is checked.</div>
        <div id="child5">Child 5 is shown when Parent 1 <strong>is not</strong> checked.</div>
		<div class="child-class1">Child using class is shown when Parent 1 is checked.</div>
		<div class="child-class1">Another child using class is shown when Parent 1 is checked.</div>
        <ul>
            <li><code>'child1', 'parent1' //checkbox parent</code></li>
            <li><code>'child2', 'parent1_AND_parent2' //AND rule</code></li>
            <li><code>'child3', 'parent1 parent2' //OR rule</code></li>
            <li><code>'child4', 'parent1_AND_parent3 parent2' //AND and OR rules</code></li>
            <li><code>'child5', 'NOT_parent1' //negative relationship</code></li>
			<li><code>$('.child-class1').showhide({'parentStatement': 'parent1'}); //checkbox parent</code></li>
        </ul>
        <hr />
        <h2>Radio Buttons Example</h2>
        <input id="parent4" type="radio" name="radioGroup" checked="checked" /><label for="parent4">Parent 4</label>
        <input id="parent5" type="radio" name="radioGroup" /><label for="parent5">Parent 5</label>
		<input id="parent5b" type="radio" name="radioGroup" /><label for="parent5b">Parent 5b (Doesn't have any children)</label>
        <div id="child6">Child 6 is shown when Parent 4 is selected.</div>
        <div id="child7">Child 7 is shown when Parent 5 is selected.</div>
        <ul>
            <li><code>child6', 'parent4'</code></li>
            <li><code>child7', 'parent5'</code></li>
        </ul>
        <hr />
        <h2>Dropdowns (&lt;select&gt;) Example</h2>
        <label for="parent6">Parent 6</label>
        <select id="parent6">
            <option value="foo">Foo</option>
            <option value="bar">Bar</option>
            <option value="hello">Hello</option>
            <option value="world">World</option>
        </select>
        <div id="child8">Child 8 is shown when Parent 6 -> Foo is selected.</div>
        <div id="child9">Child 9 is shown when Parent 6 -> Bar is selected.</div>
        <div id="child10">Child 10 is shown when Parent 6 -> Hello <strong>or</strong> World is selected.</div>
        <div id="child11">Child 11 is shown when Parent 6 -> World <strong>is not</strong> selected.</div>
        <ul>
            <li><code>'child8', 'parent6_VAL_foo' //select parent</code></li>
            <li><code>'child9', 'parent6_VAL_bar' //select parent</code></li>
            <li><code>'child10', 'parent6_VAL_hello parent6_VAL_world' //select w/ OR</code></li>
            <li><code>'child11', 'NOT_parent6_VAL_world //select w/ negative</code></li>
        </ul>
    </form>
    <form id="formulas">
        <hr />
        <h2>Formula Example</h2>
        <label for="input1">Input 1</label>
        <input id="input1" type="text" />
        =
        <label for="input2">Input 2</label>
        <input id="input2" type="text" value="2" />
        +
        <label for="input3">Input 3</label>
        <input id="input3" type="text" value="3" />
		<ul>
            <li><code>$('#formulas').showhide({ 'formula': [['input1', 'input2+input3']] });</code></li>
        </ul>
    </form>
</body>
</html>
